﻿@namespace MudBlazor.Docs.Examples

<MudGrid>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-nowrap px-1">
            <MudPaper Class="pa-2 ma-2 mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-wrap px-1">
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">16</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">17</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">18</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-wrap-reverse px-1">
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">16</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">17</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">18</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

